<template>
  <div>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">境内理财购买</x-header>
      <div v-if="resultCode == 'AAAAAAA'">
        <div class="img-box-success"></div>
        <div class="financial-buy-result">购买成功!</div>
      </div>
      <div v-else>
        <div class="img-box-failed"></div>
        <div class="financial-buy-result">购买失败!</div>
      </div>
      <div class="financial-buy-result-detail">
        <div><div class="result-item-left">产品名称</div><div class="result-item-right">{{repord.PrdName}}</div></div>
        <div><div class="result-item-left">产品类型</div><div class="result-item-right">{{repord.PrdType}}</div></div>
        <div><div class="result-item-left" style="width:35%;">预期年化收益率</div><div class="result-item-right" style="width: 65%;">{{repord.ExpectIncome}}</div></div>
        <div><div class="result-item-left">投资期限</div><div class="result-item-right">{{repord.InvestmentExpires}}</div></div>
        <div><div class="result-item-left">风险等级</div><div class="result-item-right">{{repord.RiskLevel}}</div></div>
        <div><div class="result-item-left">是否保本</div><div class="result-item-right"><span v-if="repord.CapitalPrd == '1'">是</span><span v-else>否</span></div></div>
        <div><div class="result-item-left">付款账号</div><div class="result-item-right">{{repord.PaymentAccount}}</div></div>
        <div><div class="result-item-left">购买金额</div><div class="result-item-right">{{repord.BuyAmt}}</div></div>
      </div>
      <div class="financial-result-button" @click="gotoHome">完成</div>
      <!-- <div class="financial-result-button" @click="refreshTest">刷新按钮</div> -->
      <!-- <div>{{ aaa }}</div> -->
  </div>
</template>

<script>
/*eslint-disable*/
export default {
  data () {
    return {
      repord: {
        PrdName: '',
        PrdType: '',
        ExpectIncome: '',
        InvestmentExpires: '',
        RiskLevel: '',
        CapitalPrd: 0,
        BuyAmt: '',
        PaymentAccount: ''
      },
      aaa: ''
    }
  },
  methods: {
    gotoHome: function () {
      this.$router.push({name: 'FinancialMain'})
    },
    refreshTest: function () {
      let l_vm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'M0401011', 'user_Data': {'ExpectIncome': '12.12%', 'InvestmentExpires': '120', 'CurrencyType': '014', 'CapitalPrd': '0 ', 'RiskLevel': '10', 'SubscribeDate': '20180506', 'SurplusLimit': '3000000', 'BankNote': '01', 'PaymentAccount': '6210897600012345', 'BuyAmt': '100'}}}),
        function (response) {
          l_vm.aaa = JSON.stringify(response)
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            l_vm.repord = response.data.data[0]
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>

<style scoped>
.a, .b{
  width: 100px;
  text-align: center;
  background: lightcoral;
}
.img-box-success{
  width: 1.08rem;
  height: 1.08rem;
  margin-top: .8rem;
  margin-bottom: .52rem;
  margin-left: 50%;
  transform: translateX(-50%);
  background: url(../../assets/img/Financial/FinancialBuyResultSuccess.png) no-repeat left top;
  background-size: 100% 100%;
}
.img-box-failed{
  width: 1.08rem;
  height: 1.08rem;
  margin-top:.8rem;
  margin-bottom: .52rem;
  margin-left: 50%;
  transform: translateX(-50%);
  background: url(../../assets/img/Financial/zunxiang.png) no-repeat left top;
  background-size: 100% 100%;
}
.financial-buy-result{
  text-align: center;
  font-size: .28rem;
}
.financial-buy-result-detail{
  font-size:.28rem;
  margin:.68rem .3rem 1.12rem .3rem;
  padding: 0.26rem .3rem;
  border-radius: .28rem;
  background: #F7F8FA;
}
.financial-buy-result-detail>div{
  padding: .14rem 0;
}
.result-item-left{
  /* display:inline-block; */
  width:30%;
  float: left;
  color:rgba(153,153,153,1);
}
.result-item-right{
  display:inline-block;
  text-align: right;
  width:70%;
  color:rgba(51,51,51,1);
}
.financial-result-button{
  width: 3.4rem;
  height: .88rem;
  margin: 0 auto;
  line-height: .88rem;
  font-size: .34rem;
  color: #FFF;
  text-align: center;
  background: #EC1B30;
  border-radius: 0.06rem;
}
</style>
